<template>
  <el-card class="question" v-for="(item, index) in detail" :key="index">
    <span class="number">{{ number }}</span>
    <span class="title"> {{ question.title }} </span>
    <!--如果数据库中的问题类型为单项选择或者多项选择-->
    <!--则将数据库中的数据以表格、柱状图、饼状图、圆环图、条形图的方式进行展示-->
    <div v-if="item.type == 'radio' || item.type == 'checkbox'">
      <el-table
        size="small"
        :data="item.result"
        style="width: 100%"
        stripe
        class="table"
      >
        <el-table-column prop="option" label="选项"></el-table-column>
        <el-table-column
          prop="count"
          label="数量"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="percent"
          label="占比"
          width="180"
        ></el-table-column>
      </el-table>
      <br />

      <div class="detail">
        <div class="charts">
          <el-button type="primary" plain @click="gocolumn">柱状图</el-button>
          <el-button type="primary" plain @click="gosector">扇形图</el-button>
          <el-button type="primary" @click="hide">隐藏图表</el-button>
        </div>
        <column v-show="iscolumn" :datalist="datalist"></column>
        <sector v-show="issector"></sector>
      </div>

      <div :id="'img' + index" class="img" v-show="visible[index] == 1"></div>
      <div :id="'bing' + index" class="bing" v-show="visible[index] == 2"></div>
      <div :id="'ring' + index" class="ring" v-show="visible[index] == 3"></div>
      <div :id="'tz' + index" class="tz" v-show="visible[index] == 4"></div>
    </div>
  </el-card>
</template>

<script>
import column from '@/components/Analysis/charts/column'
import sector from '@/components/Analysis/charts/sector'
export default {
  components:{
    column,
    sector
  },
  props: {
    question: Object,
    number: Number,
    changeAnswers: Function,
  },
  data() {
    return {
      answer: null,
    };
  },
  methods: {
    gocolumn(){
      if(this.$data.iscolumn===false){
        this.$data.iscolumn=true
        this.$data.issector=false
      }
    },
    gosector(){
      if(this.$data.issector===false){
        this.$data.iscolumn=false
        this.$data.issector=true
      }
    },
    hide(){
      this.$data.iscolumn=false
      this.$data.issector=false
  }
  },
};
</script>

<style scoped>
.question-area {
  margin-bottom: 20px;
}

.question-area span {
  margin-right: 5px;
}

.number {
  font-weight: bolder;
  font-size: 18px;
}

.title {
  font-size: 18px;
}

.answer-area {
  font-size: 14px;
}
</style>
